<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="daterange"
          value-format="YYYY-MM-DD"
          placeholder="选择创建时间"
          class="!w-240px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
      @selection-change="handleSelectionChange"
      class="custom-table"
      show-summary
      sum-text="合计"
      :summary-method="summaryMethod"
      height="calc(100vh - 500px)"
      max-height="calc(100vh - 500px)"
    >
      <el-table-column type="index" width="60" fixed />
      <el-table-column label="门店" align="center" prop="storageName" fixed />
      <el-table-column
        v-for="source in customerSourceOptions"
        :key="source.value"
        :label="source.label"
        align="center"
        :width="85"
      >
        <template #default="{ row }">
          <div v-if="row[source.label]" style="font-weight: bold !important; font-size: 14px">{{
            row[source.label]
          }}</div>
          <div v-else style="font-weight: bold !important; font-size: 14px">0</div>
        </template>
      </el-table-column>

      <el-table-column label="总数" align="center" width="60" prop="total" color="blue">
        <template #default="{ row }">
          <div style="font-weight: bold !important; font-size: 14px; color: blue">{{
            row.total
          }}</div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CustomerApi } from '@/api/crm/crmcustomer'

const loading = ref(true)
const list = ref([])
const sumList = ref([])
const total = ref(0)
const queryFormRef = ref()
const selectCustomers = ref([])
const isDisabled = ref(true)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  createTime: undefined as any | undefined
})

// 获取客户来源字典选项
const customerSourceOptions = getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await CustomerApi.getCustomerStatistics(queryParams)
    list.value = data.list
    sumList.value = data.sumList

    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  if (
    queryParams.createTime &&
    Array.isArray(queryParams.createTime) &&
    queryParams.createTime.length === 2
  ) {
    const startDate = formatDate(queryParams.createTime[0], 'YYYY-MM-DD')
    const endDate = formatDate(queryParams.createTime[1], 'YYYY-MM-DD')
    queryParams.createTime[0] = startDate + ' 00:00:00'
    queryParams.createTime[1] = endDate + ' 23:59:59'
  }

  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const handleSelectionChange = (val) => {
  if (val.length > 0) {
    isDisabled.value = false
  }
  selectCustomers.value = val
}

const summaryMethod = (param) => {
  const { columns } = param
  let sums: any = []
  columns.forEach((column, index) => {
    if (index === 0) {
      return
    }
    if (index === 1) {
      sums[index] = '合计'
      return
    }
    sums[index] = sumList.value.filter((item) => item === column.label).length

    if (index === columns.length - 1) {
      sums[index] = sumList.value.length
      return
    }
  })

  return sums
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.acea-row {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* 辅助类 */
}

/* 上下两边居中对齐 */
.acea-row.row-between-wrapper {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
.baseInfo {
  ::v-deep .el-card__header {
    padding: 10px 20px !important;
  }
}

.ivu-mb {
  margin-bottom: 10px;
}
.up,
.el-icon-caret-top {
  color: #f5222d;
  font-size: 12px;
  opacity: 1 !important;
}

.down,
.el-icon-caret-bottom {
  color: #39c15b;
  font-size: 12px;
  /*opacity: 100% !important;*/
}

.content {
  &-number {
    font-size: 24px;
  }
  &-time {
    font-size: 14px;
    /*color: #8C8C8C;*/
  }
}
.spBlock {
  display: block;
}
.el-divider--horizontal {
  margin: 10px 0;
}

/* 表格字体大小设置 */
.custom-table {
  :deep(.el-table__body-wrapper) {
    font-size: 12px;
  }

  :deep(.el-table__header-wrapper) {
    font-size: 12px;
  }

  :deep(.el-table__footer-wrapper) {
    font-size: 12px;
  }

  /* 确保所有表格单元格内容都是10px */
  :deep(.el-table td),
  :deep(.el-table th) {
    font-size: 12px;
  }

  /* 合计行样式 */
  :deep(.el-table__footer-wrapper .el-table__cell) {
    font-weight: bold !important;
    font-size: 14px !important;
    color: blue;
  }

  /* 针对合计行中的span元素 */
  :deep(.el-table__footer-wrapper .summary-text) {
    font-weight: bold !important;
    font-size: 12px !important;
  }
}
</style>
